<template>
<!--  <div>菜单一</div>-->
  <div class="main">
    <div class="menu">
        <ul>
          <li>
            <router-link to="/menu1/submenu1">子菜单1</router-link>
          </li>
          <li>
            <router-link to="/menu1/submenu2">子菜单2</router-link>
          </li>
        </ul>
    </div>

    <div class="content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "Menu1"
}
</script>

<style scoped>
  .main {
    display: flex;
  }

  ul li {
    float: left;
    padding-left: 20px;
    list-style-type: none;
  }

  ui li a {
    text-decoration: none;
  }

  .content{
    padding: 30px;
  }
</style>
